<template>

    <div>

        <h2>消息推送</h2>

        <div class="container">
            <div>
                <div style="margin-bottom: 20px;">
                    <el-button type="default" @click="add">添加新推送</el-button>
                </div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-date-picker
                            v-model="params.datetime"
                            type="datetimerange"
                            start-placeholder="注册日期"
                            end-placeholder="注册日期"
                            :default-time="['00:00:01']">
                    </el-date-picker>

                    <el-form-item>
                        <el-button type="primary" @click="reload">查询</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        >
                </el-table-column>
                <el-table-column
                        prop="body"
                        label="内容"
                        >
                </el-table-column>
                <el-table-column
                        prop="status_name"
                        label="状态"
                        >
                </el-table-column>
                <el-table-column
                        label="操作" width="180"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="scope.row.status==0" @click="startSend(scope.row.id)">马上推送</el-button>
                        <el-button size="mini" v-if="scope.row.status==0" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <el-dialog
                        title="推送"
                        :visible.sync="dialogVisible"
                        width="50%"
                        :close-on-click-modal="false"
                >
            <el-form ref="form" :model="form" label-width="160px">

                <el-form-item label="标题">
                    <el-input size="small" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input size="small" v-model="form.body"></el-input>
                </el-form-item>
                <el-form-item label="设备类型">
                    <template>
                        <el-radio-group v-model="form.device">
                            <el-radio label="apple">苹果</el-radio>
                            <el-radio label="android">安卓</el-radio>
                            <el-radio label="all">全部</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="推送范围">
                    <el-select size="small" v-model="form.type" placeholder="请选择">
                        <el-option key="all" value="all" label="全部用户"></el-option>
                        <el-option key="collect" value="collect" label="指定用户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户范围" v-if="form.type=='collect'">
                    <el-input type="textarea" v-model="form.collect"></el-input>
                </el-form-item>
                <el-form-item label="跳转页面">
                    <el-select size="small" v-model="form.redirect" placeholder="请选择">
                        <el-option key="home" value="home" label="应用首页"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="跳转参数">
                    <el-input size="small" v-model="form.vals"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>

    export default {
      data() {
        return {
          items: [],
          loading: true,
          params: {
            limit: 10,
            offset: 0,
            datetime: []
          },
          currentPage: 1,
          total: 0,
          dialogVisible: false,
          form:{
            device:'all'
          }
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/push/message', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        startSend(messageId) {
            axios.post('/admin/api/push/message/send', {id:messageId}).then((res) => {
                if (res.data.code === 0) {
                  this.fetch();
                } else {
                  this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                this.$message('系统错误');
                this.loading = false;
            })
        },
        add(){
            this.dialogVisible = true;
        },
        save(){
            axios.post('/admin/api/push/message/add', this.form).then((res) => {
                if (res.data.code === 0) {
                  this.dialogVisible = false;
                  this.fetch();
                } else {
                  this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                this.$message('系统错误');
                this.loading = false;
            })
        },
        remove(id){
            axios.post('/admin/api/push/message/delete', {id:id}).then((res) => {
                if (res.data.code === 0) {
                  this.fetch();
                } else {
                  this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                this.$message('系统错误');
                this.loading = false;
            })
        }
      }
    }
</script>